<template>
    <div class="cat-chapter">
        <el-button class="right" @click="goBack">返回</el-button>
        <div class="cat-chapter-title">{{title}}</div>
        <el-tabs v-model="activeName" type="border-card">
            <el-tab-pane
                class="row-complete"
                v-for="(tabItem, tabIndex) in tabs"
                :key="tabItem.name"
                :label="tabItem.title"
                :name="tabItem.name"
            >
                <div v-for="(item,index) in chapterContents" :key="index" class="row-complete">
                    <div slot="header" class="clearfix">
                        <span v-if="activeName === 'cn'">{{getLargeFormat(index+1)}} {{item.name}}</span>
                        <span v-if="activeName === 'en'">{{(index+1)}}、 {{item.nameEn}}</span>
                        <div v-if="item.contentType===0" class="content">
                            <div
                                v-show="activeName==='cn'"
                                v-html="item.content"
                                :ref="'content'+index"
                            ></div>
                            <div
                                class="content"
                                v-show="activeName==='en'"
                                :ref="'contentEn'+index"
                                v-html="item.contentEn"
                            ></div>
                        </div>
                        <div v-else>
                            <div
                                class="content"
                                v-show="activeName==='cn'"
                                v-html="item.minorDetailTable?item.minorDetailTable.contentBefore:''"
                            ></div>
                            <div
                                class="content"
                                v-show="activeName==='en'"
                                v-html="item.minorDetailTable?item.minorDetailTable.contentBeforeEn:''"
                            ></div>
                            <course-type
                                v-if="item.minorDetailTable && item.minorDetailTable.table === 1"
                                :templateId="templateId"
                                :operationFlag="false"
                                :type="type"
                            />

                            <minor-table
                                v-if="item.minorDetailTable && item.minorDetailTable.table === 2"
                                :templateId="templateId"
                                :operationFlag="false"
                                :type="type"
                                :colspan="18"
                                :schoolTerm="schoolTerm"
                                :advancedType="advancedType"
                            ></minor-table>
                            <div
                                class="content"
                                v-show="activeName==='cn'"
                                v-html="item.minorDetailTable?item.minorDetailTable.contentAfter:''"
                            ></div>
                            <div
                                class="content"
                                v-show="activeName==='en'"
                                v-html="item.minorDetailTable?item.minorDetailTable.contentAfterEn:''"
                            ></div>
                        </div>
                    </div>
                </div>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>
import MinorTable from "./MinorTable";
import CourseType from "./CourseType";
import RelationTable from "./RelationTable";
import { getChapterTemplete } from "common/src/api/minor/minorCulturePlanManager";
export default {
    name: "CatChapter",
    components: { MinorTable, RelationTable, CourseType },
    props: {
        templateId: {
            type: Number,
            default: 0
        },
        type: {
            default: 1,
            type: Number
        },
        title: {
            type: String,
            default: ""
        },
        advancedType: {
            default: '',
            type: String
        },
        schoolTerm: {
            default: 6,
            type: Number
        }
    },
    data() {
        return {
            tabs: [
                {
                    title: "填写章节样例（中文）",
                    name: "cn"
                },
                {
                    title: "填写章节样例（英文）",
                    name: "en"
                }
            ],
            activeName: "cn",
            dialogShow: false,
            chapterContents: [],
            updataIndex: 0
        };
    },
    mounted() {
        this.getTemplate();
    },
    methods: {
        getTemplate() {
            let params = {
                templateId: this.templateId,
                type: this.type
            };
            if (this.type == "2") {
                params = {
                    cultureId: this.templateId,
                    type: this.type
                };
            }
            getChapterTemplete(params).then(({ code, data }) => {
                if (code === 200) {
                    this.chapterContents = data.chapterContents;
                }
            });
        },
        getLargeFormat(num, suffix = "、") {
            const value = Number(num);
            if (!isNaN(value)) {
                let result = "";
                const char = [
                    "一",
                    "二",
                    "三",
                    "四",
                    "五",
                    "六",
                    "七",
                    "八",
                    "九"
                ];
                if (value > 0 && value < 10) {
                    result = char[value - 1];
                } else if (value >= 10 && value < 100) {
                    if (Math.floor(value / 10) === 1) {
                        result += "十";
                    } else {
                        result += char[Math.floor(value / 10) - 1] + "十";
                    }
                    if (value % 10 > 0) {
                        result += char[(value % 10) - 1];
                    }
                }
                return result + suffix;
            } else {
                return "";
            }
        },
        goBack() {
            this.$emit("goBack");
        }
    }
};
</script>

<style lang="scss" scoped>
.cat-chapter {
    .cat-chapter-title {
        padding: 24px 0 24px 16px;
        font-size: 18px;
        font-family: "微软雅黑";
        color: #2b3b4e;
    }
    background-color: #ffffff;
    .row-complete {
        margin-top: 24px;
        margin-left: 24px;
    }
    .content {
        margin-top: 12px;
    }
    .right {
        position: relative;
        float: right;
        margin: 16px 24px 0 0;
    }
}
</style>
